/**
 * #info
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/06/09
 *@description  图片控件
 */
import config from '../../../config/config.js'

/**
 * #item
 *
 * @type aty-image
 * @cn   图片
 * @menu 基础
 * @order 10
 * @nameprop    title
 * @stPlugin true
 * @stContainer false
 * @mixins   [./components/components/basic/$listenersAnnotation.js]
 */
const prefixCls = config.prefix + '-image'
// module
const module = {
  name: prefixCls,
  props: {
     /**
     * #property
     *
     * @name src
     * @cn src
     * @type image
     * @description image的src属性
     */
    /**
     * #property
     *
     * @name alt
     * @cn alt
     * @type string
     * @description image的alt属性
     */
    /**
     * #property
     *
     * @name title
     * @cn title
     * @type string
     * @description image的title属性
     */
    /**
     * #property
     *
     * @name    width
     * @cn      图片的宽
     * @type    string,number
     * @description  图片的宽
     */
    width: {
      type: [String, Number]
    },
    /**
     * #property
     *
     * @name    height
     * @cn      图片的高
     * @type    string,number
     * @description  图片的高
     */
    height: {
      type: [String, Number]
    },
    /**
     * #property
     *
     * @name    border
     * @cn      是否显示边框
     * @type    boolean
     * @value   false
     * @description  图片是否显示边框
     */
    border: {
      type: Boolean
    }
  },

  data () {
    return {
      loadError: false
    }
  },
  computed: {
    wrapClass () {
      return [
        prefixCls,
        {
          border: this.border || this.loadError
        }
      ]
    },
    currentStyle () {
      return {
        width: Artery.type(this.width) !== 'number' ? this.width : this.width + 'px',
        height: Artery.type(this.height) !== 'number' ? this.height : this.height + 'px'
      }
    }
  },
  methods: {
    load (event) {
      this.loadError = false
      /**
       * #event
       *
       * @name load
       * @cn  加载完成
       * @param   value   当前的src
       * @param   event   事件对象
       * @param   image   当前图片对象（this对象）
       * @body console.log('图片加载完成');
       * @description 图片的加载完成事件
       */
      this.$emit('load', this.src, event, this)
    },
    error (event) {
      this.loadError = true
      /**
       * #event
       *
       * @name error
       * @cn  加载失败
       * @param   value   当前的src
       * @param   event   事件对象
       * @param   image   当前图片对象（this对象）
       * @body console.log('图片加载失败');
       * @description 图片的加载失败事件
       */
      this.$emit('error', this.src, event, this)
    }
      /**
       * #event
       *
       * @name    mousemove
       * @cn      鼠标移动事件
       * @param   event   事件对象
       * @body
       * @description  鼠标移动时触发
       */
  }
}
export default module
